<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>对账管理</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../../../elementUI/index.css">
  <link rel="stylesheet" href="../../../css/index.css">
</head>

<body>
  <div id="app" class="minWidth">
    <el-form :inline="true" :form="form" style="width: 100%;">
      <div style="display: flex;">
      <el-select placeholder="请选择店铺" style="margin-right: 20px;" clearable filterable v-model.trim="form.Store_SerialNumber"
        @change="handleclassify">
        <el-option v-for="(item,index) in store" :key="index" :label="item.Store_Name"
          :value="item.Store_SerialNumber"></el-option>
      </el-select>
      <el-select placeholder="请选择供应商" style="margin-right: 20px;" clearable filterable v-model.trim="form.Supplier_SerialNumber"
        @change="handleclassify">
        <el-option v-for="(item,index) in supplier" :key="index" :label="item.Supplier_Name"
          :value="item.Supplier_SerialNumber"></el-option>
      </el-select>
      <el-select placeholder="请选择类别" style="margin-right: 20px;" clearable filterable v-model.trim="form.Category_SerialNumber"
        @change="handleclassify">
        <el-option v-for="(item,index) in category" :key="index" :label="item.Category_Name"
          :value="item.Category_Name"></el-option>
      </el-select>
      <el-date-picker v-model="time" style="margin-right: 20px;" value-format="yyyy-MM-dd" @change="DateChange" type="daterange" align="center"
        unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      <el-checkbox-group v-model="checkboxGroup">
        <el-checkbox-button v-for="(item,index) in WareUser" :label="item.value" :key="index">{{item.label}}</el-checkbox-button>
      </el-checkbox-group>
      </div>
      
    </el-form>
    <div>
      <el-col :span="8" style="width: 33.3%;">
        <el-card shadow="hover" style="margin: 30px;">
          <h3>应收金额:</h3>
          <div class="receivable">
            <div>
              <div class="text">应收金额:</div>
              <p class="total">￥{{thousands(price.Sales_Amount)}}</p>
            </div>
            <div>
              <div class="text">实收金额:</div>
              <p class="total">￥{{thousands(price.Collection_Amount)}}</p>
            </div>
            <div>
              <div class="text">未分配供应商订单数:</div>
              <p class="total">{{price.Receive_Type}}个 <el-tag size="mini" @click="DistributeSupplier">查看</el-tag></p>
  
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" style="width: 33.3%;">
        <el-card shadow="hover" style="margin: 30px;">
          <h3>应付金额:</h3>
          <div class="receivable">
            <div>
              <div class="text">应付金额:</div>
              <p class="total">￥{{thousands(price.Purchase_Amount)}}</p>
            </div>
            <div>
              <div class="text">已付金额:</div>
              <p class="total">￥{{thousands(price.Paid_Amount)}}</p>
            </div>
            <div>
              <div class="text">未付金额:</div>
              <p class="total">￥{{thousands(price.Unpaid_Amount)}}</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" style="width: 33.3%;">
        <el-card shadow="hover" style="margin: 30px;">
          <h3>利润:</h3>
          <div class="receivable">
            <div>
              <div class="text">总利润:</div>
              <p class="total">￥{{thousands(price.Profit_Amount)}}</p>
            </div>
            <div>
              <div class="text">销售利润率:</div>
              <p class="total">{{toPercent(price.Profit_Rate)}}</p>
            </div>
            <div>
              <div class="text">成本利润率:</div>
              <p class="total">{{toPercent(price.Cost_Profit_Rate)}}</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </div>
    
    <el-table  height="calc(100vh - 400px)" :data="tableData" stripe border style="width: 100%" @expand-change="handleChildren">
      <el-table-column type="expand" width="50">
        <template slot-scope="props">
          <el-table v-if="props.row.Children.article_info.length> 0? true:false"
            :data="props.row.Children.article_info">
            <el-table-column label="序号" align="center" width="50" type="index"></el-table-column>
            <el-table-column prop="Sales_Order_SerialNumber" align="center" label="销售单号"></el-table-column>
            <el-table-column prop="Collection_Date" align="center" label="收款时间"></el-table-column>
            <el-table-column prop="Article_Name" align="center" label="商品名称"></el-table-column>
            <el-table-column prop="Category_Name" align="center" label="商品类型"></el-table-column>
            <el-table-column prop="Quantity" align="center" label="销售数量">
              <template v-slot="{row}">
                {{ZeroRemoval(row.Quantity)}}
              </template>
            </el-table-column>
            <el-table-column prop="Amount" align="center" label="销售金额">
              <template v-slot="{row}">
                {{thousands(row.Amount)}}
              </template>
            </el-table-column>
            <el-table-column prop="Purchase_Amount" align="center" label="采购金额">
              <template v-slot="{row}">
                {{thousands(row.Purchase_Amount)}}
              </template>
            </el-table-column>
            <el-table-column prop="Paid_Amount" align="center" label="实付金额">
              <template v-slot="{row}">
                {{thousands(row.Paid_Amount)}}
              </template>
            </el-table-column>
            <el-table-column prop="Profit" align="center" label="毛利润">
              <template v-slot="{row}">
                {{thousands(row.Profit)}}
              </template>
            </el-table-column>
            <el-table-column prop="Supplier_Name" align="center" label="供应商名称"></el-table-column>
            <!-- <el-table-column width="220" label="操作">
                <template v-slot="{row}">
                  <el-button type="primary" size="small" @click="DistributeSupplier(row)">分配供应商</el-button>
                  <el-button type="primary" size="small" @click="GeneratePurchase(row)">生成采购单</el-button>
                </template>
              </el-table-column> -->
          </el-table>
        </template>
      </el-table-column>
      <el-table-column type="index" align="center" width="50" label="序号"></el-table-column>
      <el-table-column prop="Article_Name" align="center" label="商品名称"></el-table-column>
      <el-table-column prop="Category_Name" align="center" label="商品类型"></el-table-column>
      <el-table-column prop="Quantity" align="center" label="销售数量">
        <template v-slot="{row}">
          {{ZeroRemoval(row.Quantity)}}
        </template>
      </el-table-column>
      <el-table-column prop="Amount" align="center" label="销售金额">
        <template v-slot="{row}">
          {{thousands(row.Amount)}}
        </template>
      </el-table-column>
      <el-table-column prop="Purchase_Amount" align="center" label="采购金额">
        <template v-slot="{row}">
          {{thousands(row.Purchase_Amount)}}
        </template>
      </el-table-column>
      <el-table-column prop="Paid_Amount" align="center" label="实付金额">
        <template v-slot="{row}">
          {{thousands(row.Paid_Amount)}}
        </template>
      </el-table-column>
      <el-table-column prop="Profit" align="center" label="毛利润">
        <template v-slot="{row}">
          {{thousands(row.Profit)}}
        </template>
      </el-table-column>
      <el-table-column prop="Profit_Rate" align="center" label="销售利率">
        <template v-slot="{row}">
          {{toPercent(row.Profit_Rate)}}
        </template>
      </el-table-column>
      <el-table-column prop="Cost_Profit_Rate" align="center" label="成本利率">
        <template v-slot="{row}">
          {{toPercent(row.Cost_Profit_Rate)}}
        </template>
      </el-table-column>
      <el-table-column prop="Supplier_Name" align="center" label="供应商名称"></el-table-column>
      <!-- <el-table-column prop="Purchase_Amount" align="center" label="应付金额"></el-table-column>
            <el-table-column prop="Paid_Amount" align="center" label="实付金额"></el-table-column>
            <el-table-column prop="Sales_Amount" align="center" label="应收金额"></el-table-column>
            <el-table-column prop="Collection_Amount" align="center" label="实收金额"></el-table-column>
            <el-table-column prop="Quantity" align="center" label="数量"></el-table-column> -->
      <!-- <el-table-column label="操作" width="200">
              <template v-slot="{row}">
                <el-button type="primary" size="small" @click="DistributeSupplier()">分配供应商</el-button>
                <el-button type="primary" size="small" @click="GeneratePurchase()">生成采购单</el-button>
              </template>
            </el-table-column> -->
    </el-table>
    <!--分配供应商-->
    <el-dialog title="订单分配" width="50%" :visible.sync="dialogVisible2">
      <el-table height="400px" :data="multipleSelection">
        <el-table-column label="序号" align="center" width="50" type="index"></el-table-column>
        <el-table-column property="Sales_Order_Detail_SerialNumber" align="center" label="订单号"></el-table-column>
        <el-table-column prop="Store_Name" align="center" label="门店"></el-table-column>
        <el-table-column prop="Article_Name" align="center" label="商品"></el-table-column>
        <el-table-column property="Quantity" align="center" label="数量"></el-table-column>
        <el-table-column label="分配供应商" align="center" type="index" width="180">
          <template slot-scope="scope">
            <el-select v-model="form3.Supplier_SerialNumber" placeholder="请选择供应商">
              <el-option v-for="(item,index) in supplier1" :label="item.Supplier_Name"
                :value="item.Supplier_SerialNumber"></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm">提交</el-button>
      </div>
      <el-pagination background v-show="total1 > 0" @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1" :current-page="form1.page" :page-sizes="[1,2,3,10,50,100,500,1000]"
        :page-size="form1.limit" layout="total, sizes, prev, pager, next, jumper" :total="total1">
      </el-pagination>
    </el-dialog>


    <el-pagination background v-show="total > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="form.page" :page-sizes="[1,2,3,10,50,100,500,1000]" :page-size="form.limit"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>


  </div>
  <script type="text/javascript" src="../../../js/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="../../../js/jquery.cookie.js"></script>
  <script type="text/javascript" src="../../../js/vue.min.js"></script>
  <script type="text/javascript" src="../../../elementUI/index.js"></script>
  <script type="text/javascript" src="../../../js/utils.js"></script>
  <script type="text/javascript" src="./js/ReconciliationPrice.js"></script>
</body>

</html>